<template>
  <div class="DataView">
     <el-card>
       <div id="main1"></div>
     </el-card>
     <el-card>
       <div id="main2"></div>
     </el-card>
  </div>
</template>
<script>
import { dataView } from '@/api/api.js'
export default{
  name:'DataView',
  data(){
    return{
    }
  },
  async created(){
      // 第二个图表的数据
      const res =await dataView()
      console.log('22222',res);
      if(res.data.status ===200){
        let { legend,xAxis,series } = res.data.data;
        this.draw(legend,xAxis,series)
        this.$message({message:res.data.message,type:'success'})
      }else{
        this.$message({message:res.data.message,type:'warning'})
      }
  },
  mounted(){
     let myChart1 = this.echarts.init(document.querySelector('#main1'))
     myChart1.setOption({
          title:{
             text:'大佬进阶班'
          },
          tooltip:{},
          xAxis:{
            data:['一班','二班','三班','四班','五班','六班']
          },
          yAxis:{},
          series:[{
             name:'人数',
             type:'bar',
             data:[45,42,46,48,52,47]
          }]
     })
  },
  methods:{
      draw(legend,xAxis,series){
         let myChart2 = this.echarts.init(document.querySelector('#main2'))
         let option = {
             title:{
               text:'会话量',
             },
             tooltip:{
                trigger:'axis'
             },
             legend:{
                data:legend,
                left:'right'
             },
             xAxis:{
               type:'category',
               data:xAxis
             },
             yAxis:{
               type:'value'
             },
             series:series
         }
         myChart2.setOption(option)
      }
  }
}
</script>

<style lang="scss"  scoped>

.DataView{
  width:100%;
  display: flex;
  justify-content: space-between;
  .el-card{
    width:50%;
    #main1,#main2{
      height:500px;
    }
  }
}


</style>